<template>
	<view class="nav-pt">
		<view class="w-1 grent"></view>
		<!-- 自定义导航栏 -->
		<view class="w-1 mynav">
			<view class="status_bar"></view>
			<view class="w-1 p-r-30 fr-b-c m-t-30" style="height: 44px; overflow: hidden;">
				<image src="/static/images/home/page_title.png" class="nav_title" mode=""></image>
			</view>
		</view>
		<view class="relative w-1 p-r-30">
			<view class="sear-flex">
				<view class="sear-box fr-b-c ">
					<!-- 搜索框 -->
					<view class="fr-s-c wid" @click="toSearch">
						<image src="/static/images/home/search_home.png" style="width: 40rpx; height: 40rpx;"></image>
						<text class="c-ff fm-ali fs-30 sear-color" style="margin-left: 8rpx;">搜索</text>
					</view>
					<view class="fr-s-c">
						<view style="background-color: #E3A89B; height: 27rpx; width: 1rpx; margin: 0 25rpx;"></view>
						<image @click="scanCode" src="/static/images/home/s_home.png"
							style="width: 39rpx; height: 38rpx;">
						</image>
					</view>
				</view>
				<image @click="chooseImage" src="/static/images/home/camer_home.png"
					style="width: 41rpx; height: 41rpx;"></image>
			</view>
			<!-- 轮播图 -->
			<view class="banner-box relative w-1 fl-c" style="margin-top: 32rpx;">
				<swiper :indicator-dots="true" class="swiper" indicator-active-color="#FFFFFF">
					<swiper-item v-for="(item,index) in bannerlist" :key="index"> 
							<image :src="item.img" class="swiper-img" mode=""></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 公告 上架前注释 -->
		<!-- <view class="w-1 m-t-30 fm-ali p-r-30">
			<u-notice-bar type="error" mode="horizontal" bg-color="#FFF7F2" color="#000000" speed="100"
				:list="noticelist"></u-notice-bar>
		</view> -->
		<!-- 分类 -->
		<!-- 上架前注释 -->
		<!-- <view class="w-1  fr-b-c p-r-30" style="margin-top: 60rpx;" @click="toLiveList" >
			<view class="fr-s-c">
				<text class="c-00 fs-26 fm-ali">正在直播</text>
			</view>
			<view class="zhibo-right">
				<text>全部</text>
				<u-icon name="arrow-right" color="#000000" size="20"></u-icon>
			</view>
		</view>
		<view class="w-1 p-r-30 m-t-30 zhibo-view" @click="toLiveList" v-if="llist.length > 0">
			<view class="live-item-box" v-for="(item,index) in llist" :key="index">
				<image src="https://jiuhuan.jiuhuanmall.com/upimages/20230223/f090f16f2ddf2d97e50794665ab8dbc237.jpg"
					class="live-img" mode="aspectFill"></image>
				<view class="zhibo">
					<image src="/static/images/home/Frame7@2x.png" class="zhibo-img" mode=""></image>
					<view class="zhibo-text">
						直播中
					</view>
				</view>
				<view class="flex-1 fl-b-s" style="padding-top: 16rpx; ">
					<text class="text-line-2 c-00 fs-26 fm-ali">{{item.live_name}}</text>
				</view>
			</view>
		</view> -->
		<!-- 新品 -->
		<view class="w-1 fr-b-c m-t-40 p-r-30" style="margin-bottom: 10rpx;">
			<view class="fr-s-c">
				<image src="/static/images/home/new_goods.png" style="width: 28rpx; height: 25rpx;"></image>
				<text class="c-00 fs-26 fm-ali">最新上架</text>
			</view>
			<image @click="moreTj()" src="/static/images/home/rr_right.png" style="width: 22rpx; height: 20rpx;">
			</image>
		</view>
		<view class="new-shangjia">
			<view class="goods-item relative fl-s-s" @click="toDetail(item.id,item.platform,item.c_father_goods_id)" v-for="(item,index) in newlist"
				:key="index">
				<image :src="baseUrl.cdnurl+item.image" mode="aspectFill" class="shangjia-img">
				</image>
				<text class="m-t-30 c-00 fs-26 fm-ali text-line-2 shangjia-title"
					style="height: 75rpx; white-space: pre-wrap;">{{item.title}}</text>
				<view class="shangjia-flex shangjia-title">
					<view class="fr-s-c fm-ali " style="color: #E42D1D; align-items: baseline;">
						<text class="fs-24">￥</text>
						<text class="fs-36">{{item.price | pointsPrice}}</text>
						<text class="fs-20">.{{item.price | pointsPrice(1)}}</text>
					</view>
					
				</view>
				<!-- 上架前注释 -->
				<!-- <view class="shangjia-bottom animated11 rubberBand11" >
					此商品可原价回购
				</view> -->
			</view>
		</view>
		<!-- 推荐 -->
		<!-- <view class="w-1 fr-b-c m-t-40 p-r-30">
			<view class="fr-s-c">
				<image src="/static/images/home/tj_icon.png" style="width: 28rpx; height: 25rpx;"></image>
				<text class="c-00 fs-26 fm-ali m-l-10">推荐商品</text>
			</view>
			<image @click="moreRe()" src="/static/images/home/rr_right.png" style="width: 22rpx; height: 20rpx;">
			</image>
		</view>
		<view
			style="width: 95%;margin: 28upx auto;display:grid;grid-template-columns: repeat(2, calc(50% - 20rpx));grid-gap: 40rpx;">
			<view class="goods-item relative fl-s-s" @click="toDetail(item.id,item.platform,item.c_father_goods_id)" v-for="(item,index) in tjlist"
				:key="index">
				<image :src="baseUrl.cdnurl+item.image" mode="aspectFill" class="shangjia-img">
				</image>
				<view class="fr-c absolute c-ff fm-ali good_label" style="left: 12rpx; top: 12rpx;">精品推荐</view>
				<text class="m-t-30 c-00 fs-26 fm-ali text-line-2"
					style="height: 75rpx; white-space: pre-wrap;">{{item.title}}</text>
					<view class="shangjia-flex shangjia-title">
						<view class="fr-s-c fm-ali " style="color: #E42D1D; align-items: baseline;">
							<text class="fs-24">￥</text>
							<text class="fs-36">{{item.price | pointsPrice(0)}}</text>
							<text class="fs-20">.{{item.price | pointsPrice(1)}}</text>
						</view>
					</view>
				<view class="shangjia-bottom animated11 rubberBand11">
					此商品可原价回购
				</view>
			</view>
		</view> -->
		<!-- 邀请弹窗 -->
		<u-mask :show="show" @click="show = false" class="fl-c" :custom-style="{background:'rgba(102, 102, 102, 0.4)'}">
			<Invite :inviteCode="invitation_code" @closePup="show=false"></Invite>
		</u-mask>
		<!-- 优惠券弹窗 -->
		<u-mask :show="couponShow" @click="hidecounpon" class="fl-c fm-ali">
			<view class="relative youhui fl-s-c" @click.stop="">
				
				<view style="margin-top: 88rpx;">
					<view class="fm-ali m-l-20 m-r-20 fs-34 coupon-title">领取新人大礼包</view>
					<view class="coupon-title-desc">
						注册即可获得<text class="coupon-title-desc-text">{{totalAmount}}元</text>优惠券
					</view>
				</view>
				<scroll-view scroll-y class="scroll-y">
					<view class="relative scroll-y-veiw-img" v-for="(item,index) in couponlist" :key="index">
						<view class="fr-b-c  scroll-y-felx">
							<!-- 优惠券信息 -->
							<view class="fl-s-s ">
								<view class="fr-s-e" style="align-items: baseline;">
									<text class="fs-20 font-20" style="color: #FA360A;">￥</text>
									<text class="scroll-y-price">{{item.price}}</text>
								</view>
							</view>
							<view class="scroll-y-right">
								<view class="scroll-y-right-txt">
									新人专享券
								</view>
								<view class="fr-c get-btn" @click="getCoupon(index,item.id)">满{{Number(item.limit)}}使用</view>
							</view>
						</view>
					</view>
				</scroll-view>
			
				<view class="scroll-y-circle" @click="hidecounpon">
				</view>
			</view>
		</u-mask>

		<!-- 活动弹窗 -->
		<u-mask :show="showActive" class="fl-c fm-ali ">
			<view class="relative  active-po fl-s-c" @click.stop="">
				<image :src="activeList[showActiveindex]?baseUrl.cdnurl+activeList[showActiveindex].thumb:''" class="active-po-img"
					@click="goactives(showActiveindex)"></image>
					<u-icon name="close" class="circle" @click="hideactive"></u-icon>
			</view>
		</u-mask>
		<!-- 上架前注释 -->
		<!-- <view class="chat-tixing" v-show="ChatTcShow">
			<image src="/static/images/home/Frame@2x.png" class="chat-tixing-img-left" mode=""></image>
			<view class="chat-tixing-flex">
				<view class="chat_text">
					购物车里的商品等你很久啦！
				</view>
				<view class="chat_btn" @tap="gocart">
					去看看
				</view>
			</view>
			<image src="/static/images/home/Group3702@2x.png" @tap="ChatTcShowClose" class="chat-tixing-img" mode=""></image>
		</view> -->
	</view>
</template>

<script>
	import {
		pointsPrice
	} from '@/utils/util.js'
	import Invite from '@/components/InvitePup/InvitePup'
	import config from '@/utils/base.js';
	export default {
		data() {
			return {
				count: '',
				page:1,
				bannerlist: [],
				curbanner: 0,
				show: false,
				couponShow: false,
				couponlist: [], // 优惠券列表
				newlist: [], // 最新上架
				tjlist: [], // 推荐商品
				top_cate: [], // 顶部分类 取分类的前5个
				llist: [], // 直播列表
				invitation_code: '',
				noticelist: [],
				showActive: false, // 是否展示广告
				showActiveindex: 0, // 展示第几个广告
				activeList: {} ,// 广告列表
				ChatTcShow:true,
				baseUrl:config,
				totalAmount:'',
			}
		},
		components: {
			Invite
		},
		filters: {
			pointsPrice
		},
		onLoad() {
			this.getbanner()
			this.getNewGoods()
			this.getTj()
			// this.getClassify()
			// this.getList()
			// this.showCoupon();
			this.showActives();
			this.getContent();
			// let ChatTx = uni.getStorageSync('ChatTx')
			// if(!ChatTx){
			// 	this.ChatTcShow = false
			// }
			
		},
		onShow() {
			// if (uni.getStorageSync('id')) {
			// 	this.getInviteCode()
			// }
			
		},
		onPullDownRefresh() {
			this.getTj() //推荐商品
			this.getNewGoods()
			// this.getClassify()
			// this.getList()
		},
		onReachBottom() {
			console.log(this.tjlist.length)
			if (this.tjlist.length < this.count) {
				this.page++
				this.getTj()
			} 
		},
		methods: {
			gocart(){
				uni.switchTab({
					url:'/pages/ShoppingCart/ShoppingCart'
				})
			},
			ChatTcShowClose(){
				this.ChatTcShow = false
				uni.setStorageSync('ChatTx',false)
			},
			getContent() {
				this.$get({
					url: '/wanlshop/banner/getNotice'
				}).then(res => {
					// console.log(res)
					if (res.data) {
						for(let i in res.data){
							this.noticelist.push(res.data[i].content)
						}
					}
				})
			},
			moreRe() {
				uni.navigateTo({
					url: "/pages/Home/More/more_recommend"
				})
			},
			moreTj() {
				uni.navigateTo({
					url: "/pages/Home/More/more_tj"
				})
			},
			// 获取邀请码
			getInviteCode() {
				this.$get({
					url: '/Appuser/getUserInfo',
					data: {
						access_token: uni.getStorageSync('access_token')
					},
					loading: false
				}).then(res => {
					this.invitation_code = res.data.invitation_code
				})
			},
			toLive(id, uid, group_id) {
				if (!uni.getStorageSync('user_id')) {
					uni.navigateTo({
						url: "/pages/Login/Login"
					})
					return
				}
				if (uid != uni.getStorageSync('user_id')) {
					uni.navigateTo({
						url: './LivingDetail/WatchLiving?id=' + id + '&group_id=' + group_id
					})
				} else {
					uni.navigateTo({
						url: '/pages/Home/LivingList/OpenLiving/OpenDetail/playLiving?id=' + id + '&group_id=' +
							group_id
					})
				}
			},
			// 直播列表
			getList() {
				this.$get({
					url: '/homepage/getlives'
				}).then(res => {
					if (res.data.list) {
						this.llist = res.data.list.slice(0, 2)
					}
				})
			},
			// 获取分类列表
			// getClassify() {
			// 	this.$get({
			// 		url: '/type/doPagelistAllPic',
			// 		data: {
			// 			uniacid: 51,
			// 			type: 'showProMore',
			// 			top_cid: 0,
			// 			sub_cid: 0
			// 		}
			// 	}).then(res => {
			// 		this.top_cate = res.data.data.top_cate.slice(0, 5)
			// 	})
			// },
			// 最新上架
			getNewGoods() { 
				this.$get({
					url: '/wanlshop/home/newList'
				}).then(res => {
					// console.log(res, '+++')
					this.newlist = res.data.data
				})
			},
			// 推荐商品
			getTj() { 
				this.$get({
					url: '/wanlshop/home/tjList',
					data: {
						page: this.page
					}
				}).then(res => {
					// console.log(res)
					this.tjlist = this.page == 1 ? res.data.data : [...this.tjlist, ...res.data.data],
					this.nodata = !this.tjlist.length
					this.count = res.current_page
				})
			},

			getbanner() {
				this.$get({
					url: '/wanlshop/banner/getlist'
				}).then(res => {
					// console.log(res)
					if(res.code == 1){
						this.bannerlist = res.data
						// console.log(this.bannerlist)
					}
					
				})
			},
			// 获取优惠券
			showCoupon() {
				if (!uni.getStorageSync('user_id')) {
					uni.navigateTo({
						url: "/pages/Login/Login"
					})
					return
				}
				let t = this;
				t.$get({
					url: '/wanlshop/coupon/getList'
				}).then(res => {
					console.log(res)
					if(res.code == 1){
						if (res.data.data.length) {
							t.couponlist = res.data.data
							t.couponShow = true
						} else {
							// t.showActives();
						}
						t.totalAmount = res.data.totalAmount
					}
					
				})
			},
			// 隐藏优惠券列表
			hidecounpon() {
				let t = this;
				t.couponShow = false;
				// t.showActives();
			},
			// 获取活动列表
			showActives() {
				let t = this;
				this.$get({
					url: '/activity/activityList'
				}).then(res => {
					if (res.data.length) {
						t.showActive = true;
						t.showActiveindex = 0;
						t.activeList = res.data;
					}
				})
			},
			// 隐藏活动列表
			hideactive() {
				this.showActive = false;
				if (this.showActiveindex < (this.activeList.length - 1)) {
					this.showActiveindex = this.showActiveindex + 1;
					this.showActive = true;
				} else {
					// this.showActiveindex = 0;
					this.showCoupon()
				}
			},
			// 跳转到活动 
			goactives(index) {
				let list = this.activeList[index] ? this.activeList[index] : '';
				uni.navigateTo({
					url: "/pages/Home/Active/list?id=" + list.id
				})
				// if (list) {
				// 	if (list.content_count > 1) {
				// 		uni.navigateTo({
				// 			url: "/pages/Home/Active/list?id=" + list.id
				// 		})
				// 		return
				// 	} else {
				// 		uni.navigateTo({
				// 			url: "/pages/Home/GoodsDetail/GoodsDetail?id=" + list.content
				// 		})
				// 		return
				// 	}
				// }
			},
			showInvite() {
				if (!uni.getStorageSync('user_id')) {
					uni.navigateTo({
						url: "/pages/Login/Login"
					})
					return
				}
				this.show = true
			},
			// 领取优惠券
			getCoupon(index, id) {
				if (!uni.getStorageSync('user_id')) {
					uni.navigateTo({
						url: "/pages/Login/Login"
					})
					return
				}
				let t = this
				t.$post({
					url: '/wanlshop/coupon/receive',
					data: {
						id
					}
				}).then(res => {
					if(res.code ==1){
						uni.showToast({
							title: '领取成功',
							mask: true
						})
						t.couponlist[index].is_get = 0
						setTimeout(()=>{
							t.showCoupon()
						},1500)
						
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
					
				})
			},
			// 去商品详情
			toDetail(id,platform,c_father_goods_id) {
				let c_father = c_father_goods_id || 0
				if(!uni.getStorageSync('user_id')){
					uni.navigateTo({
						url:"/pages/Login/Login"
					})
					return
				}
				uni.navigateTo({
					url: '/pages/Home/GoodsDetail/GoodsDetail?id=' + id+'&platform='+platform+'&c_father_goods_id='+c_father
				})
			},
			// 去分类
			toClassify(index) {
				uni.setStorageSync('c_current', index)
				uni.switchTab({
					url: '/pages/Classification/Classification'
				})
			},
			// 去搜索
			toSearch() {
				uni.navigateTo({
					url: '/pages/Home/SearchPage/SearchPage'
				})
			},
			toLiveList() {
				if (!uni.getStorageSync('user_id')) {
					uni.navigateTo({
						url: "/pages/Login/Login"
					})
					return
				}
				uni.navigateTo({
					url: '/pages/Home/LivingList/LivingList'
				})
			},
			// 切换banner
			changeBanner({
				detail
			}) {
				let {
					current
				} = detail
				this.curbanner = current
			},
			
			// 一下扫码
			scanCode() {
				// #ifndef H5
				uni.scanCode({
					success: res => {
						var QRcode = this.getUrlParam(res.result);
						switch (QRcode.QRtype) {
							case 'goods':
								this.onGoods(QRcode.id);
								break;
							case 'user':
								this.$wanlshop.to(`/pages/user/info?id=${QRcode.id}`);
								break;
							case 'category':
								this.$wanlshop.on('/pages/category');
								break;
							case 'page':
								this.$wanlshop.to(`/pages/page/index?id=${QRcode.id}`);
								break;
							case 'shop':
								this.onShop(QRcode.id);
								break;
							case 'live':
								// #ifdef APP-PLUS || MP-WEIXIN
								this.$wanlshop.auth(`/pages/shop/live/live`);
								// #endif
								// #ifndef APP-PLUS || MP-WEIXIN
								this.$wanlshop.msg('目前只开放App和微信小程序直播');
								// #endif
								break;
							case 'chat':
								this.toChat(QRcode.id);
								break;
						}
					}
				});
				// #endif
				// #ifdef H5
				this.$wanlshop.msg('暂不支持H5扫码');
				// #endif
			},
			// 解析Url
			getUrlParam(url) {
				var obj = {};
				var data = url.split('?')[1].split('&');
				for (var i = 0; i < data.length; i++) {
					var res = data[i].split('=');
					obj[res[0]] = res[1];
				}
				return obj;
			},
			async chooseImage() {
				//#ifdef APP-PLUS
				let result = await this.$store.dispatch("quanxian/requestPermissions",'WRITE_EXTERNAL_STORAGE')
					console.log(result)
				if (result !== 1) return
				this.$store.state.isCAMERA = true
				// #endif			
				uni.chooseImage({
					count: 1,
					success: res => {
						uni.navigateTo({
							url: '/pages/Home/SearchPage/ImgSearch/ImageSearch?src=' +
								encodeURIComponent(res.tempFilePaths[0])
						})
					}
				})
			},
		}
	}
</script>

<style>
	page {
		padding-bottom: 80rpx;
	}
	/deep/.uni-swiper-dot-active{
		width: 34rpx !important;
		height: 8rpx !important;
		background: #FFFFFF !important;
		border-radius: 4rpx !important;
	}
	/deep/.uni-swiper-dot{
		width: 8rpx;
		height: 8rpx;
	}
	.swiper{
		width: 100%;
		height: 280rpx !important;
		border-radius: 12rpx;
	}
	.swiper-img{
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
	}
	.banner-box{
		height: 280rpx;
		border-radius: 12rpx !important;
		overflow: hidden !important;
	}
	.chat-tixing{
		font-size: 26rpx;
		color: #fff;
	}
	.chat_btn{
		width: 94rpx;
		height: 42rpx;
		background: linear-gradient(180deg, #E46C30 0%, #E32C1C 100%);
		border-radius: 21rpx;
		text-align: center;
		font-size: 22rpx;
		line-height: 42rpx;
	}
	.chat-tixing-flex{
		width: 80%;
		display: flex;
		justify-content: space-between;
	}
	.chat-tixing{
		width: 690rpx;
		height: 64rpx;
		background: rgba(51,51,51,0.8);
		border-radius: 58rpx 58rpx 58rpx 58rpx;
		opacity: .7;
		position: fixed;
		bottom: 8rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		justify-content: space-around;
		box-sizing: border-box;
		padding: 0 12rpx;
	}
	.chat-tixing-img{
		width: 18rpx;
		height: 18rpx;
	}
	.chat-tixing-img-left{
		width: 28rpx;
		height: 28rpx;
	}
.shangjia-bottom{
	font-size: 22rpx;
	font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
	font-weight: normal;
	color: #E56D31;
	padding: 0 10rpx;
}
	.shangjia-yuanjia {
		font-size: 22rpx;
		font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #999999;
		text-decoration: line-through;
	}

	.shangjia-flex {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.new-shangjia {
		width: 95%;
		margin: 28upx auto;
		display: grid;
		grid-template-columns: repeat(2, calc(50% - 20rpx));
		grid-gap: 40rpx;
	}

	.shangjia-img {
		border-radius: 12rpx 12rpx 0 0;
		width: 330rpx;
		height: 300rpx;
	}

	.shangjia-title {
		padding: 0 10rpx;
	}

	.zhibo-view {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		overflow-x: auto;
		/* overflow: hidden; */
	}

	.nav_title {
		/* 	color: #000000; */
		width: 118rpx;
		height: 42rpx;
	}

	.sear-flex {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		justify-content: space-between;
	}

	.circle {
		position: absolute;
		right: 22rpx;
		top: 30rpx;
		/* height: 36rpx;
		width: 36rpx; */
		font-size: 30rpx;
		font-weight: 300;
		/* transform: rotate(-45deg); */
		color: #858585;
	}

	.font-20 {
		font-size: 20rpx;
		color: #fff !important;
	}

	.active-po {
		width: 460rpx;
		height: 588rpx;

	}

	.active-po-img {
		width: 460rpx;
		height: 588rpx;
		border-radius: 22rpx;
	}

	.youhui {
		width: 100%;
		height: 690rpx;
		background-image: url('/static/images//home/Group13637@2x.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.scroll-y {
		height: 220rpx;
		width: 320rpx;
		position: relative;
		z-index: 999;
	}


	.scroll-y-veiw-img {
		width: 320rpx;
		height: 75rpx;
		background-image: url('/static/images/home/Group13635@2x.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		margin-top: 14rpx;
		/* background: #FFFFFF; */
	}

	.scroll-y-price {
		font-size: 20rpx;
		color: #fff;
	}

	.scroll-y-felx {
		height: 75rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10rpx;
	}

	.scroll-y-right {
		display: flex;
		align-items: center;
	}

	.scroll-y-right-txt {
		font-size: 16rpx;
		margin: 0 10rpx;
	}

	.scroll-y-circle {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		top: 68rpx;
		right: 180rpx;
		color: #DC9D31;
		/* transform: rotate(-45deg); */
		/* font-size: 46rpx; */
	}

	.sear-color {
		color: #999999;
	}

	.zhibo-right {
		display: flex;
		align-items: center;
		font-size: 22rpx;
		height: 38rpx;
		background: #F8F9FE;
		border-radius: 16rpx;
		display: inline-block;
		/* padding: 0 10rpx; */

	}

	.zhibo {
		height: 40rpx;
		padding: 0 10rpx;
		display: flex;
		align-items: center;
		position: absolute;
		left: 20rpx;
		top: 20rpx;
		color: #fff;
		border-radius: 20rpx;
		background-color: #000000;
		font-size: 20rpx;
		opacity: .7;
	}

	.zhibo-img {
		width: 20rpx;
		height: 16rpx;
		margin-right: 8rpx;
	}

	>>>.u-indicator-item-round {
		width: 10rpx;
		height: 10rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 18rpx;

	}

	>>>.u-indicator-item-round-active {
		width: 60rpx !important;
		height: 10rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
	}

	/* 	.common_bg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 284rpx;
	} */
	/* .grent{
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 520rpx;
		background: linear-gradient(90deg, #FDF2F2 0%, rgba(233, 245, 224, .6) 100%);
		
	} */
	.grent {
		position: fixed;
		left: 0; 
		top: 0;
		width: 100vw;
		height: 520rpx;
		/* background: linear-gradient(90deg, #FDF0F0 0%, rgba(233, 244, 244, .1) 100%); */
		background-image: url('/static/images/home/Maskgroup@2x.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.mynav {
		background: linear-gradient(180deg, #FDF0F0 0%, rgba(233, 244, 244, 0) 100%);
		background-size: 100vh, 520rpx;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		overflow: hidden;
	}

	.sear-box {
		width: 620rpx;
		height: 60rpx;
		padding: 0 30rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		border: 3rpx solid #000000;
	}
	.wid{
		width: 100%; 
	}

	.swiper {
		height: 262rpx;
		width: 686rpx;
		border-radius: 18rpx;
		overflow: hidden;
	}


	.active-box {
		margin-top: 40rpx;
		width: 690rpx;
	}

	.act {
		width: 60rpx;
		height: 10rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		margin-right: 15rpx;
	}

	.dot-item {
		width: 10rpx;
		height: 10rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 18rpx;
		margin-right: 15rpx;
	}

	.goods-item {
		width: 330rpx;
		height: 506rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		border: 2rpx solid #F4F4F4;
	}

	.good_label {
		padding: 0 14rpx;
		height: 34rpx;
		background: rgba(0, 0, 0, 0.7);
		border-radius: 17rpx;
		font-size: 16rpx;
		font-family: Alibaba;
		font-weight: 400;
		color: #FFFFFF;
	}

	.coupon-slidetab {
		width: 44rpx;
		height: 0rpx;
		border: 8rpx solid;
		border-image: linear-gradient(90deg, rgba(196, 62, 23, 1), rgba(196, 62, 23, 0)) 8 8;
	}

	.coupon-title {
		color: #EA4646;
		font-size: 28rpx;
		text-align: center;
	}

	.coupon-title-desc {
		text-align: center;
	}

	.coupon-title-desc-text {
		color: #EA4646;
	}

	.get-btn {
		/* width: 100rpx; */
		height: 28rpx;
		background: #FA360A;
		box-shadow: 0rpx 0rpx 8rpx 2rpx rgba(247, 96, 84, 0.6);
		border-radius: 26rpx;
		font-size: 20rpx;
		font-family: Alibaba;
		color: #FFFFFF;
		display: inline-block;
		padding: 0 10rpx;

	}

	.geted-btn {
		width: 100rpx;
		height: 52rpx;
		background: #A3A3A3;
		border-radius: 26rpx;
		font-size: 20rpx;
		font-family: Alibaba;
		color: #FFFFFF;
	}
	/* .live-item-box:last-child{
		margin-right: 30rpx;
	} */
	.live-item-box {
		/* height: 288rpx; */
		width: 288rpx;
		position: relative;
		margin-right: 30rpx;
		/* border-radius: 12rpx; */
		/* overflow: hidden; */
	}

	/* .live-item-box+.live-item-box {
		margin-top: 30rpx;
	} */

	.live-img {
		width: 288rpx;
		height: 288rpx;
		border-radius: 12rpx;
	}

	.living-icon {
		width: 14rpx;
		height: 16rpx;
	}

	.live-head {
		width: 32rpx;
		height: 32rpx;
		border: 2rpx solid #ffffff;
		border-radius: 50%;
	}

	.live-head+.live-head {
		margin-left: -16rpx;
	}




	@-webkit-keyframes rubberBand {
		from {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}

		30% {
			-webkit-transform: scale3d(1.25, 0.75, 1);
			transform: scale3d(1.25, 0.75, 1);
		}

		40% {
			-webkit-transform: scale3d(0.75, 1.25, 1);
			transform: scale3d(0.75, 1.25, 1);
		}

		50% {
			-webkit-transform: scale3d(1.15, 0.85, 1);
			transform: scale3d(1.15, 0.85, 1);
		}

		65% {
			-webkit-transform: scale3d(0.95, 1.05, 1);
			transform: scale3d(0.95, 1.05, 1);
		}

		75% {
			-webkit-transform: scale3d(1.05, 0.95, 1);
			transform: scale3d(1.05, 0.95, 1);
		}

		to {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	}

	@keyframes rubberBand {
		from {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}

		30% {
			-webkit-transform: scale3d(1.25, 0.75, 1);
			transform: scale3d(1.25, 0.75, 1);
		}

		40% {
			-webkit-transform: scale3d(0.75, 1.25, 1);
			transform: scale3d(0.75, 1.25, 1);
		}

		50% {
			-webkit-transform: scale3d(1.15, 0.85, 1);
			transform: scale3d(1.15, 0.85, 1);
		}

		65% {
			-webkit-transform: scale3d(0.95, 1.05, 1);
			transform: scale3d(0.95, 1.05, 1);
		}

		75% {
			-webkit-transform: scale3d(1.05, 0.95, 1);
			transform: scale3d(1.05, 0.95, 1);
		}

		to {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	}

	.rubberBand {
		-webkit-animation-name: rubberBand;
		animation-name: rubberBand;
	}



	@-webkit-keyframes jello {

		from,
		11.1%,
		to {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		22.2% {
			-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
			transform: skewX(-12.5deg) skewY(-12.5deg);
		}

		33.3% {
			-webkit-transform: skewX(6.25deg) skewY(6.25deg);
			transform: skewX(6.25deg) skewY(6.25deg);
		}

		44.4% {
			-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
			transform: skewX(-3.125deg) skewY(-3.125deg);
		}

		55.5% {
			-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
			transform: skewX(1.5625deg) skewY(1.5625deg);
		}

		66.6% {
			-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
			transform: skewX(-0.78125deg) skewY(-0.78125deg);
		}

		77.7% {
			-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
			transform: skewX(0.390625deg) skewY(0.390625deg);
		}

		88.8% {
			-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
			transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
		}
	}

	@keyframes jello {

		from,
		11.1%,
		to {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		22.2% {
			-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
			transform: skewX(-12.5deg) skewY(-12.5deg);
		}

		33.3% {
			-webkit-transform: skewX(6.25deg) skewY(6.25deg);
			transform: skewX(6.25deg) skewY(6.25deg);
		}

		44.4% {
			-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
			transform: skewX(-3.125deg) skewY(-3.125deg);
		}

		55.5% {
			-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
			transform: skewX(1.5625deg) skewY(1.5625deg);
		}

		66.6% {
			-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
			transform: skewX(-0.78125deg) skewY(-0.78125deg);
		}

		77.7% {
			-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
			transform: skewX(0.390625deg) skewY(0.390625deg);
		}

		88.8% {
			-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
			transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
		}
	}

	.jello {
		-webkit-animation-name: jello;
		animation-name: jello;
		-webkit-transform-origin: center;
		transform-origin: center;
	}




	.animated {
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		animation-iteration-count: infinite;
	}
	
	
	
	@-webkit-keyframes rubberBand11 {
		from {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	
		30% {
			-webkit-transform: scale3d(1.25, 0.75, 1);
			transform: scale3d(1.25, 0.75, 1);
		}
	
		40% {
			-webkit-transform: scale3d(0.75, 1.25, 1);
			transform: scale3d(0.75, 1.25, 1);
		}
	
		50% {
			-webkit-transform: scale3d(1.15, 0.85, 1);
			transform: scale3d(1.15, 0.85, 1);
		}
	
		65% {
			-webkit-transform: scale3d(0.95, 1.05, 1);
			transform: scale3d(0.95, 1.05, 1);
		}
	
		75% {
			-webkit-transform: scale3d(1.05, 0.95, 1);
			transform: scale3d(1.05, 0.95, 1);
		}
	
		to {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	}
	
	
	
	.rubberBand11 {
		-webkit-animation-name: rubberBand11;
		animation-name: rubberBand11;
	}
	
	.animated11 {
		-webkit-animation-duration: 2s;
		animation-duration: 2s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		animation-iteration-count: infinite;
	}
</style>